<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="../jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box {
				width: 1200px;
				height: 400px;
				margin: auto;
			}
			
			.box .item img {
				width: 1200px;
				height: 400px;
			}
		</style>
	</head>

	<body>
		<div class="box">

			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="1.jpg" alt="...">
						<div class="carousel-caption">
							<!--...-->
						</div>
					</div>
					<div class="item">
						<img src="2.jpg" alt="...">
						<div class="carousel-caption">
							<!--...-->
						</div>
					</div>
					<div class="item">
						<img src="3.jpg" alt="...">
						<div class="carousel-caption">
							<!--...-->
						</div>
					</div>
					<div class="item">
						<img src="4.jpg" alt="...">
						<div class="carousel-caption">
							<!--...-->
						</div>
					</div>
					<!--...-->
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		$('.carousel').carousel({
			interval: 2000
		})
		
	</script>

</html>